<template>
    <div class="goods-item-wrap">
        <div @click="$router.push('/goods-detail?id='+goods.goods_id)" style="cursor: pointer;">
            <!-- 标签区域开始 -->
            <div class="tag-box" v-if="tag">
                <span class="tag-txt">{{ tag }}</span>
            </div>
            <!-- 标签区域结束 -->

            <!-- 封面区域开始 -->
            <div class="cover-box">
                <img v-img-lazy="global.FILE_DOMAIN + goods.cover_url" />
            </div>
            <!-- 封面区域结束 -->

            <!-- 商品名称开始 -->
            <div class="name ellipsis-2" v-html="goods.goods_name"></div>
            <!-- 商品名称结束 -->

            <!-- 价格盒子开始 -->
            <div class="price-box">
                <!-- 价格 -->
                <div class="price">
                    <span class="symbol">¥</span>
                    <span class="number">{{ (goods.price/100).toFixed(2) }}</span>
                </div>

                <!-- 市场价格 -->
                <div class="market-price">
                    <span class="symbol">¥</span>
                    <span class="market-number">{{ (goods.market_price/100).toFixed(2) }}</span>
                </div>
            </div>
            <!-- 价格盒子结束 -->


            <!-- 总销量开始 -->
		    <div class="sales-num" v-if="goods.sales_num">总销量 {{ goods.sales_num }}</div>
            <!-- 总销量结束 -->
        </div>

        <!-- 操作按钮 -->
        <div class="btn-wrap" v-if="isButton" @click="handlerOperate(goods)">
            <span>{{ buttonTxt }}</span>
        </div>
    </div>
</template>

<script setup>
import { inject } from "vue"


// -------------- 定义全局变量开始 --------------
// 全局属性
const global = inject('global')

const emit = defineEmits(['handlerOperate'])

defineProps({
	goods: {
		type: Object,
		default: {}
	},
    isButton: {
		type: Boolean,
		default: false
	},
    buttonTxt: {
		type: String,
		default: ''
	},
    tag: {
		type: String,
		default: ''
	}
})
// -------------- 定义全局变量结束 --------------

// 处理操作事件
const handlerOperate = (item) => {
    emit('handlerOperate', item)
}
</script>

<style scoped lang="scss">
.goods-item-wrap {
    width: 220px;
    height: 340px;
    padding: 10px;
    margin-top: 20px;
    margin-right: 25px;
    border: 1px solid #ccc;
    border-radius: 4px;

    overflow: hidden;

    position: relative;
    .tag-box {
        position: absolute;
        left: 5px;
        top: 5px;
        width: 20px;
        height: 44px;
        border: 1px solid #CF4444;
        color: #CF4444;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        .tag-txt {
            font-size: 14px;
            line-height: 20px;
            font-weight: bold;
        }
    }

    &:nth-child(5n) {
        margin-right: 0;
    }

    transition: all 0.4s;

    position: relative;

    &:hover {
        border: 1px solid $main-color;
        .btn-wrap {
            transform: none;
        }
    }

    // 封面区域
    .cover-box {
        cursor: pointer;
        height: 210px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    // 名称区域
    .name {
        margin: 10px 0;
        line-height: 20px;
        height: 40px;
    }

    // 价格区域
    .price-box {
        display: flex;
        justify-content: space-between;
        .price {
            color: #CF4444;
            .symbol {
                font-size: 14px;
            }
            .number {
                font-size: 18px;
            }
        }
        .market-price {
            color: #ccc;
            text-decoration: line-through;
        }
    }

    // 销量区域
    .sales-num {
        font-size: 12px;
        text-align: end;
        margin-top: 10px;
        color: #ccc;
    }

    // 操作按钮区域
    .btn-wrap {
        cursor: pointer;

        position: absolute;
        left: 0;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: $main-color;
        text-align: center;

        transform: translate3d(0,100%,0);
        transition: all 0.4s;

        display: flex;
        justify-content: center;
        align-items: center;
        span {
            color: #fff;
        }
    }
}
</style>